import React, { useRef ,useState} from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {Row, DatePicker, Select ,Col,Card } from 'antd';
const { Option } = Select;
import ECharts from 'echarts-for-react';
import * as echarts from 'echarts';
type LayoutType = Parameters<typeof ProForm>[0]['layout'];
import { GridContent } from '@ant-design/pro-layout';
import styles from './style.less'
function handleChange(value) {
  console.log(`selected ${value}`);
}
function onChange(value) {
  console.log(`selected ${value}`);
}

function onBlur() {
  console.log('blur');
}

function onFocus() {
  console.log('focus');
}

function onSearch(val) {
  console.log('search:', val);
}


export default () => {

  var dataAxis = ['00:00','01:00', '02:00', '03:00', '04:00', '05:00', '10:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
  var series=[
    {
        name: 'A相电压',
        type: 'line',
        stack: '总量',
        data: [230, 231, 232, 233, 234, 230, 210,230, 231, 232, 233, 234, 230, 210,234, 230]
    },
    {
        name: 'B相电压',
        type: 'line',
        stack: '总量',
        data:  [210, 231, 232, 253, 234, 280, 220,230, 201, 232, 233, 234, 230, 210,234, 230]
    },
    {
        name: 'C相电压',
        type: 'line',
        stack: '总量',
        data:  [220, 231, 232, 234, 234, 230, 210,230, 241, 235, 233, 234, 230, 210,234, 230]
    }]
  
    var series1=[
      {
          name: '三相电压不平衡度',
          type: 'line',
          stack: '总量',
          data: [0, 0, 0, 0, 0, 0, 0,0, 0, 0, 0, 0, 0, 0,0, 0,0]
      }]
    
  const OPTION1_DATA = {
    color: ["pink", "#5fb78b", "#48dbe2"],
    title: {
      left: "left",
      subtext: "(V)",
    },
    xAxis: {
      axisLine:{
        lineStyle:{
          color:"#fff",
        }
      },  
      data: dataAxis,
      axisTick: {
            show: false
        }, axisTick: {
      alignWithLabel: true
    }
    },
    yAxis: {
      axisLine:{
        lineStyle:{
          color:"#fff",
        }
      },  
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    legend:{
      top: 'bottom',
      padding:[50,0,0],
      // left:charOption.position||'center',
      data: ['A相电压','B相电压','C相电压'], 
   
      textStyle: {
      color: "white"
      }
  },
    grid: {
      left: 40,
      right:50,
      bottom: 50,
    },
    series:series
};

const OPTION2_DATA = {
  color: ["#48dbe2"],
 
  xAxis: {
    axisLine:{
      lineStyle:{
        color:"#fff",
      }
    },  
    data: dataAxis,
    axisTick: {
          show: false
      }, axisTick: {
    alignWithLabel: true
  }
  },
  yAxis: {
    axisLine:{
      lineStyle:{
        color:"#fff",
      }
    },  
  },
  dataZoom: [
      {
          type: 'inside'
      }
  ],
  legend:{
    top: 'bottom',
    padding:[50,0,0],
    // left:charOption.position||'center',
    data: [series[0].name], 
 
    textStyle: {
    color: "white"
    }
},
  grid: {
    left: 40,
    right:50,
    bottom: 30,
  },
  series:series1
};





  
const [option1, setOption1] = useState(OPTION1_DATA);
const [option2, setOption2] = useState(OPTION2_DATA);
  return (
      <GridContent>
      <React.Fragment>
       
        <Row     style={{margin:'0 0 20px 12px'}}  > 
        <div  className={styles.inputBg} >
            <Select  bordered={false}  defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}}   >
               <Option value="">全部区域</Option>
                <Option value="week">区域1</Option>
                <Option value="month">区域2</Option>
                <Option value="quarter">区域3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false}  style={{ width: 'auto',minWidth: 120 }} defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部类型</Option>
                <Option value="week">类型1</Option>
                <Option value="month">类型2</Option>
                <Option value="quarter">类型3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false} style={{ width: 'auto',minWidth: 120 }} defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部设备</Option>
                <Option value="week">设备1</Option>
                <Option value="month">设备2</Option>
                <Option value="quarter">设备3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
                <DatePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false} onChange={onChange} />
              </div>
       
         </Row>
      

        
          <Row gutter={24} style={{ margin: 0}}>  
            <Col xl={12} lg={12} md={12} sm={12} xs={12}   > 
             <Card    className={styles.reltimeiitemCard}   title="三相电压不平衡度" headStyle={{    backgroundColor: '#143173',border: 0}}>
             <ECharts option={option1}  style={{ height: 400, width: '100%',marginBottom:20 }} />
           
              </Card>
            </Col>
            <Col xl={12} lg={12} md={12} sm={12} xs={12}   > 
             <Card    className={styles.reltimeiitemCard}   title="三相电压不平衡度" headStyle={{    backgroundColor: '#143173',border: 0}}>
             <ECharts option={option1}  style={{ height: 400, width: '100%',marginBottom:20 }} />
                
              </Card>
            </Col>
            
          </Row>
          <Row>  
            <Col xl={12} lg={12} md={12} sm={12} xs={12}   >
              <div className={styles.unbalanceBox}>
                  <ECharts option={option2}  style={{ height: 400, width: '100%',marginBottom:20 }} /> 
              </div>
            </Col>
            <Col xl={12} lg={12} md={12} sm={12} xs={12}   >
              <div className={styles.unbalanceBox}>
                  <ECharts option={option2}  style={{ height: 400, width: '100%',marginBottom:20 }} /> 
              </div>
            </Col>
            </Row>
         
        </React.Fragment>
      </GridContent>
    );
  };